<script setup lang="ts">
import {onMounted, ref} from "vue"
import {addTeam, updateTeam} from "@/api/team.ts";
import {showFailToast, showSuccessToast,} from 'vant';
import { Toast } from 'vant';
import router from "@/router";
import {useRoute} from "vue-router";


const route = useRoute()
let  team = route.query.team
const initTeamData = {
  name: '',
  description: '',
  maxNum: 0,
  password: '',
  expireTime: '',
  status: "0",
}
const mindate = new Date();
mindate.setDate(mindate.getDate() + 1)
const showPicker =ref(false)
const teamInfo = ref({ ...initTeamData})

const onConfirm = ({ selectedValues }) => {
  console.log(selectedValues)
  teamInfo.value.expireTime = `${selectedValues.join('-')} 00:00:00`
  console.log(teamInfo.value.expireTime)
  showPicker.value = false;
};
const onSubmit = (values) => {
  if(teamInfo.value.name == '')
  {
    showFailToast('队伍名不能为空');
    return;
  }
  if(teamInfo.value.description == '')
  {
    showFailToast('队伍简介不能为空');
    return;
  }
  if (teamInfo.value.expireTime== ''){
    showFailToast('截止加入时间不能为空');
    return;
  }
  if(teamInfo.value.status == 2 && teamInfo.value.password == '')
  {
    showFailToast('队伍密码不能为空');
    return;
  }
  if(team == null) {
    addTeam(teamInfo.value).then((res) => {
      if (res.data.data) {
        showSuccessToast('队伍创建成功');
        router.push({
          path: '/team',
          replace: true
        })
      } else {
        showFailToast('队伍创建失败');
      }
    }).catch((err) => {
    })
  }
  else{
    updateTeam(teamInfo.value).then((res) => {
      if (res.data.data == true) {
        showSuccessToast('队伍修改成功');
        router.push({
          path: '/mycreateTeam',
          replace: true
        })
      } else {
        showFailToast('队伍修改失败');
      }
    }).catch((err) => {})
  }
  console.log(teamInfo.value)
  // TODO: 提交队伍信息
}

onMounted(()=>{
  if(team){
    team = JSON.parse(team)
    teamInfo.value.id = team.id
    teamInfo.value.name = team.name
    teamInfo.value.description = team.description
    teamInfo.value.maxNum = team.maxNum
    teamInfo.value.expireTime = (new Date(team.expireTime).toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" })).replace(/\//g, "-")
    teamInfo.value.status = team.status.toString()
    console.log(teamInfo.value)
    if(team.status == 2){
      teamInfo.value.password = team.password
    }
  }
})
</script>

<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="teamInfo.name"
          name="name"
          label="队伍名"
          placeholder="请输入队伍名"
          :rules="[{ required: true, message: '请填写队伍名' }]"
      />
        <van-field
            v-model="teamInfo.description"
            rows="3"
            autosize
            label="队伍简介"
            type="textarea"
            placeholder="请输入队伍简介"
        />
      <van-field name="stepper" label="队伍人数">
        <template #input v-if="team ==null">
          <van-stepper v-model="teamInfo.maxNum" min="3" max="20" />
        </template>
        <template #input v-if="team !=null">
          <van-stepper v-model="teamInfo.maxNum" min="3" max="20" disabled />
        </template>
      </van-field>

      <van-field
          v-model="teamInfo.expireTime"
          is-link
          readonly
          name="datePicker"
          label="截止加入时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-date-picker
            :model-value="pickerValue"
            @confirm="onConfirm"
            type="datetime"
            @cancel="showPicker = false"
            :min-date="mindate"
        />
      </van-popup>

      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="teamInfo.status" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私密</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field v-if="teamInfo.status == 2"
          v-model="teamInfo.password"
          type="password"
          name="password"
          label="队伍密码"
          placeholder="请输入队伍密码"
          :rules="[{ required: true, message: '请填写队伍密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>

<style scoped>

</style>